<template>
  <div class="mine">
    <!-- 资料区域 -->
    <div class="profile-box">
      <!-- 我们适配用了一个插件pxtovw -->
      <!-- 但是它只能转css写的样式，你写的行内属性、行内样式没法转 -->
      <van-image fit="cover" round :src="userInfo.photo" />
      <div class="info-box">
        <h4>{{ userInfo.name }}</h4>
        <span>{{ userInfo.birthday }}</span>
      </div>
    </div>

    <!-- 快捷工具 -->
    <van-grid :column-num="3" :border="false">
      <van-grid-item icon="newspaper-o" text="我的作品" />
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="tosend" text="阅读历史" />
    </van-grid>

    <!-- 功能列表 -->
    <van-cell-group>
      <van-cell to="/mine/edit" title="编辑资料" icon="edit" is-link />
      <van-cell to="/chat" title="小智同学" icon="chat-o" is-link />
      <van-cell title="系统设置" icon="setting-o" is-link />
      <van-cell @click="logout" title="退出登录" icon="info-o" is-link />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'MyMine',

  computed: {
    userInfo () {
      return this.$store.state.userInfo
    }
  },

  async created () {
    this.$store.dispatch('reqUserInfo')
  },

  methods: {
    logout () {
      this.$store.commit('logout')
      this.$toast('退出成功')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
// 加scoped后，只能让样式作用于当前组件写过的标签
// 如果某个标签没在当前组件写，但是当前有显示它，那就用深度作用选择器解决： ::v-deep 选择器
.mine {
  $color: #3296fa;
  .profile-box {
    height: 140px;
    background-color: $color;
    display: flex;
    align-items: center;

    .van-image {
      width: 100px;
      height: 100px;
      margin: 0 10px 0 20px;
    }

    .info-box {
      h4 {
        color: #fff;
        font-size: 18px;
        margin-bottom: 10px;
      }
      span {
        background-color: #fff;
        color: $color;
        font-size: 16px;
        padding: 3px 2px;
      }
    }
  }

  .van-grid {
    // 深度作用选择器
    ::v-deep {
      .van-icon {
        font-size: 30px;
      }
      .van-icon-newspaper-o {
        color: $color;
      }
      .van-icon-star-o {
        color: #f00;
      }
      .van-icon-tosend {
        color: orange;
      }
    }
  }
}
</style>
